<template>
	<view>
		<!-- 筛选框弹出 -->
		<u-popup :show="popupShow" mode="right" @close="close" @open="open">
			<view style="width: 500rpx;">
				<u-row>
					<u-col span="12">
						<u-row class="u-m-t-50">
							<u-col span="5" offset="1">
								<u--text text='分类' size='15'></u--text>
							</u-col>
						</u-row>
						<u-row class="u-m-t-10">
							<u-col span="10" offset="1" >
								<u-row>
									<text style="font-size: 25rpx;border: 1px solid #9d9d9d;padding:0  15rpx;border-radius: 15rpx;color: #9d9d9d;margin-right: 10rpx;">湖北</text>
									<text style="font-size: 25rpx;border: 1px solid #9d9d9d;padding:0  15rpx;border-radius: 15rpx;color: #9d9d9d;margin-right: 10rpx;">湖北</text>
									<text style="font-size: 25rpx;border: 1px solid #9d9d9d;padding:0  15rpx;border-radius: 15rpx;color: #9d9d9d;margin-right: 10rpx;">湖北</text>
									<text style="font-size: 25rpx;border: 1px solid #9d9d9d;padding:0  15rpx;border-radius: 15rpx;color: #9d9d9d;margin-right: 10rpx;">湖北</text>
		 
								</u-row>
							</u-col>
						</u-row>
					</u-col>
				</u-row>
			</view>
		</u-popup>
		<u-row style="padding:30rpx">
			<u-icon name="scan" size="30"></u-icon>
			<u-search disabled='true' placeholder="日照香炉生紫烟" @click='clickSearch' v-model="keyword"></u-search>
		</u-row>
		<u-row>
			<u-col span="10">
				<u-tabs :list="list1" @click="click"></u-tabs>
			</u-col>
			<u-col span="1" justify="end" textAlign="right">
				<u-button type="success" size="mini" @click="popupShow = true" color="">筛选</u-button>
			</u-col>
		</u-row>
			<u-dropdown>
			<u-dropdown-item v-model="value1" title="全部" :options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="货架" :options="options2"></u-dropdown-item>
			<u-dropdown-item v-model="value3" title="供应商" :options="options2"></u-dropdown-item>
			<u-dropdown-item v-model="value4" title="店员" :options="options2"></u-dropdown-item>
		</u-dropdown>
		 
	 
		<view class="" style="padding: 32rpx;">
			<u-row >
				<u-col span="3">
					<u--image :showLoading="true" src= 'https://cdn.uviewui.com/uview/album/1.jpg' width="80px" height="80px" @click="click"></u--image>
				</u-col>
				<u-col span="9">
					<u-row>
						<u--text text="伊利牛奶" size='20' color='#BF3F3F' bold></u--text>
					</u-row>
					<u-row>
						<u-col span="6">
							<u--text text="瓶" color='#3FBF7F'></u--text>
						</u-col>
						<u-col span="6">
							<u--text text="已过期" color='#BCBCBC'></u--text>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="4"  ju >
							<u--text text="录:2020-20-20" size='12'></u--text> 
							
						</u-col>
						<u-col span="4">
							<u--text text="有效: 360天" size='12'></u--text>
						</u-col>
						<u-col span="4">
							<u--text text="临:未设置" size='12'></u--text>
							 
						</u-col>
					</u-row>
					<u-row>
						<u-col span="4">
							<u--text text="下:未设置"  size='12'></u--text>
						</u-col>
						<u-col span="4" offset="4">
							<u--text text="过:2021-11-11" size='12'></u--text>
						</u-col>
						 
					</u-row>
				</u-col> 
			</u-row>
		</view>
	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
 
				popupShow: false,
				list1: [{
					name: '转临',
				}, {
					name: '下架',
				}, {
					name: '过期'
				}, ],
				content: `
									<p>露从今夜白，月是故乡明</p>
									 
								`,
				pickerShow: false,
				columns: [
					['中国', '美国', '日本']
				],
				cellList: [{
					title: '全部'
				}, {
					title: '全部货架'
				}, {
					title: '所有供应商'
				}, {
					title: '全部店员'
				}]
			}
		},
		methods: {
			clickSearch(){
				uni.navigateTo({
					url:'../shopSearch/shopSearch'
				})
			},
			close() {
				this.popupShow = false
				// console.log('close');
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.show = false
			}
		}
	}
</script>

<style>

</style>
